<template>
	<view class="btn-box">
	  <view class="bot-cart"  @tap="emit('goCart')">
	    <view class="tips-num"> {{ cartList.length }} </view>
	    <image src="/static/tabIcon/cart.png" class="img" />
	  </view>
	  <view class="bot-price-btn">
	    <view class="bot-price">
	      合计：<text>￥<text>29.98</text></text>
	    </view>
	    <view class="btn" @tap="emit('goResult')"> 去结算 </view>
	  </view>
	</view>
</template>

<script setup>
	import { computed } from 'vue';
	import { useCartStore } from '@/store/index.js'
	const emit = defineEmits(['goCart', 'goResult'])
	const cartList = computed(() => {
		const { cartList } = useCartStore()
		return cartList
	})
</script>

<style scoped lang="scss">
	.btn-box {
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  background-color: #fff;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  width: 100%;
	  height: 50px;
	  padding: 0 12px;
	  box-sizing: border-box;
	  .bot-cart {
	    position: relative;
	    width: 29px;
	    height: 29px;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    .img {
	      width: 29px;
	      height: 29px;
	    }
	    .tips-num {
	      position: absolute;
	      top: 0;
	      right: -50%;
	      transform: translate(-50%, -50%);
	      width: 16px;
	      height: 16px;
				display: flex;
				align-items: center;
				justify-content: center;
	      color: #FFFFFF;
	      font-size: 12px;
	      font-weight: 500;
	      border-radius: 50%;
	      background: #F53F3F;
	    }
	  }
	  .bot-price-btn {
	    display: flex;
	    align-items: center;
	    .bot-price {
	      font-weight: 400;
	      font-size: 14px;
	      color: #666666;
	      text {
	        font-weight: 700;
	        font-size: 14px;
	        color: #FF3B1E;
	        text {
	          font-weight: 700;
	          font-size: 20px;
	          color: #FF3B1E;
	        }
	      }
	    }
	    .btn {
	      width: 102px;
	      height: 40px;
	      color: #FFFFFF;
	      font-size: 16px;
	      font-weight: 400;
	      text-align: center;
	      line-height: 40px;
	      background: #FF3B1E;
	      margin-left: 10px;
	      border-radius: 99px;
	    }
	  }
	}
</style>